<template>
  <div :ref="refName" v-loading="!chart" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'

require('echarts/theme/macarons') // echarts theme

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    refName() {
      return `son${this.className}`
    }
  },
  mounted() {
    this.initChart()
  },
  beforeRouteLeave() {
    this.destroyChart()
  },
  beforeDestroy() {
    this.destroyChart()
  },
  methods: {
    updateOptions(xData, series, title, unit) {
      if (this.chart) this.destroyChart()
      this.chart = echarts.init(this.$refs[this.refName], 'macarons')
      this.chart.setOption(this.getOptions(xData, series, title, unit))
    },
    destroyChart() {
      if (!this.chart) return
      this.chart.dispose()
      this.chart = null
    },
    initChart() {
      this.chart = echarts.init(this.$refs[this.refName], 'macarons')
      this.chart.setOption(this.getOptions([], [], ''))
    },
    getOptions(xData, series, title, unit) {
      // console.log('xdata, series', xData, series)
      const tmpSeries = []
      const tmpLegend = []
      for (const s of series) {
        const name = `设备号:${s.number};指标ID:${s.quotaId}`
        tmpLegend.push(name)
        tmpSeries.push({
          data: s.data,
          name: name,
          type: 'line',
          smooth: true,
          all: s,
          markPoint: {
            silent: true,
            data: [
              { type: 'max', name: '最大值', symbol: 'rect' },
              { type: 'min', name: '最小值', symbol: 'roundRect' }
            ],
            symbolSize: 25
          }
        })
      }
      return {
        title: {
          text: title,
          left: 'center',
          textStyle: { color: '#000' }
        },
        legend: {
          data: tmpLegend, orient: 'vertical', // 垂直显示
          y: 'top', // 延Y轴居中
          x: 'right' // 居右显示
        },
        grid: { top: '10%', left: '4%', right: '5%', bottom: '3%', containLabel: true },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            let res = `时间: ${params[0].axisValue}<br>`
            for (const param of params) {
              const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + param.color + ';"></span>'
              const key = '<span style="display:inline-block;margin-right:3px;height:10px;width:165px;">' + `${param.seriesId}` + '</span>'
              const val = '<span style="display:inline-block;margin-right:3px;height:10px;width:20px;">' + `${param.value}` + '</span>'
              const uni = '<span style="display:inline-block;margin-right:3px;height:10px;width:8px;">' + `${unit}` + '</span>'
              res = res + marker + key + ': ' + val + uni + '<br>'
            }
            return res
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false }
        },
        series: tmpSeries
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
